<template>
  <view class="container">
    <!-- <view class="navbar u-f-ajc">
      <image src="/static/jibei/home/back.png" class="abso_back" mode="widthFix"
        @click="$u.route({type: 'back', delta: 1})"></image>
      <image src="/static/jibei/chongzhi/header.png" mode="widthFix"></image>
    </view> -->

    <view class="content">
      <view class="content_box">
        <view class="u-f-ac u-f-jsb titles">
          <view>充值数量</view>
          <view @click="cz_jilu">充值记录</view>
        </view>
        <!-- <view class="u-f-ac u-f-jsb titles">
          <view>充值方式</view>
        </view> -->
        <!-- <view class="inputs u-f-ac u-f-jsb" @click="changePayType(2)">
          <view class="u-f-ac">
            <image src="/static/zfb.png" class="icon_image"></image>
            <view>支付宝</view>
          </view>
          <radio value="" color="#EB2E15" :checked='payType == 2' />
          </radio>
        </view>
        <view :style="{ display: boolean_zfb }">
          <view class="u-f-ac u-f-jsb paddings titles">
            <view>支付宝收款码</view>
          </view>
          <view class="inputs inputs2 u-f-ajc" @click="previewImage1">
            <image :src="zfbskm" v-if="zfbskm"></image>
            <view class="u-f-ajc" v-else>
              点击上传支付宝收款码</view>
          </view>
        </view> -->


        <view class="inputs u-f-ac u-f-jsb" @click="changePayType(3)">
          <view class="u-f-ac">
            <!-- <image src="/static/btb.png" class="icon_image"></image> -->
            <view>银行卡</view>
          </view>
          <!-- <radio value="" color="#EB2E15" :checked='payType == 3' />
          </radio> -->
        </view>
        <!-- <view :style="{display:boolean}">
          <view class="u-f-ac u-f-jsb titles">
            <view>收款姓名</view>
          </view>
          <view class="inputs paddings u-f-ac u-f-jsb">
            <view style="width: 100%;">
              <u-input disabled placeholder="请输入姓名" v-model="bank.bank_user" placeholder-style="color: #fff;">
              </u-input>
            </view>
          </view>
          <view class="u-f-ac u-f-jsb titles">
            <view>收款银行名称</view>
          </view>
          <view class="inputs paddings u-f-ac u-f-jsb">
            <view style="width: 100%;">
              <u-input disabled placeholder="请输入银行" v-model="bank.bank" placeholder-style="color: #fff;">
              </u-input>
            </view>
          </view>
          <view class="u-f-ac u-f-jsb titles">
            <view>收款开户支行</view>
          </view>
          <view class="inputs paddings u-f-ac u-f-jsb">
            <view style="width: 100%;">
              <u-input disabled placeholder="请输入开户支行" v-model="bank.bank_branch" placeholder-style="color: #fff;">
              </u-input>
            </view>
          </view>
          <view class="u-f-ac u-f-jsb titles">
            <view>收款银行卡号</view>
          </view>
          <view class="inputs paddings u-f-ac u-f-jsb">
            <view style="width: 100%;">
              <u-input disabled placeholder="请输入银行卡号" v-model="bank.bank_id" placeholder-style="color: #fff;">
              </u-input>
            </view>
          </view>
        </view> -->

        <view class="inputs paddings u-f-ac u-f-jsb">
          <view>
            <u-input placeholder="￥请输入充值金额" v-model="money" type="number" placeholder-style="color: #fff;"></u-input>
          </view>
        </view>
        
        <view class="texts">
          <view style="margin-bottom: 10rpx;">请直接转账到以下银行账户</view>
          <view style="margin-bottom: 10rpx;">开户名称：<text style="color: red;"
              @click="copyBankCard(bank.bank_user)">{{bank.bank_user}}</text></view>
          <view style="margin-bottom: 10rpx;">开户账号：<text style="color: red;"
              @click="copyBankCard(bank.bank_id)">{{bank.bank_id}}</text></view>
          <view style="margin-bottom: 10rpx;">开户行名：<text style="color: red;"
              @click="copyBankCard(bank.bank)">{{bank.bank}}</text></view>
          <view style="margin-bottom: 10rpx;">开户地址：<text style="color: red;"
              @click="copyBankCard(bank.bank_branch)">{{bank.bank_branch}}</text></view>
          <view style="margin-bottom: 10rpx;">可点击复制银行账户信息</view>
        </view>


        <!-- <view class="u-f-ac u-f-jsb titles" style="margin-top: 30rpx;">
          <view>交易凭证</view>
        </view> -->
        <view class="inputs inputs2 u-f-ajc" @click="chooseImage">
          <image v-if="imagess[0]" :src="imagess[0]"></image>
          <view class="u-f-ajc" v-else>
            点击上传交易凭证</view>
        </view>

      </view>
      <!-- <view class="lijichongzhi" @click="ljcz"></view> -->
      <view class="u-f-ajc" style="margin: 30rpx 0;">
        <!-- <image src="/static/jibei/chongzhi/lijichongzhi.png" mode="widthFix" style="width: 400rpx;" @click="ljcz">
        </image> -->
      </view>

    </view>

    <tabbars :current="2"></tabbars>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        bank: {},
        res: {},
        openid: '',
        money: '',
        active: "active",
        checked: 'checked',
        boolean: 'none',
        boolean_wx: 'none',
        boolean_zfb: 'none',
        bankout: 'none',
        arrs: [],
        realname: '',
        bankname: '',
        bankbranch: '',
        bankbranch2: '',
        bankbranch3: '',
        bankcard: '',
        bankcard1: '',
        credit: '',
        multiple: '',
        withdrawcharge: '',
        withdrawmoney: '',
        // 地址
        accountarea: '-请选择地区-',
        cityPickerValueDefault: [0, 0, 0],
        pickerValueDefault: [0],
        pickerValueArray: [],
        // mulLinkageTwoPicker: cityData,
        // province:province,
        // city:city,
        // area:area,
        // asd:asd,
        themeColor: '#007AFF',
        pickerText: '',
        mode: '',
        deepLength: 1,
        datavalue: '',
        payType: '', // 支付类型
        imagess: [], // 数组类型图片 wx
        imgurl: '', // 字符串类型图片 wx
        imagesss: [], // 数组类型图片 zfb
        imgurls: '', // 字符串类型图片 zfb
        wxskm: '',
        zfbskm: '',
        type: '',
      };
    },
    onLoad: function() {
      uni.showLoading()
      this.changePayType(3)
      uni.getStorage({
        key: 'openid',
        success: (res) => {
          this.openid = res.data
          this.setAjax()
        },
        fail: () => {
          uni.navigateTo({
            url: '../login/login'
          });
        }
      });
    },
    methods: {
      setAjax() {
        uni.request({
          url: this.$BASE_URL+'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=order.luckdraw.pay_info&app=1',
          method: 'POST',
          data: {
            'openid': this.openid
          },
          header: {
            'Content-Type': 'application/x-www-form-urlencoded'
          },
          success: res => {
            this.res = res.data
            // console.log(this.res)
            this.bank = res.data.bank
            this.wxskm = res.data.wechat_collection
            this.zfbskm = res.data.alipay_collection
            uni.hideLoading()
          },
          fail: () => {},
          complete: () => {}
        });
      },
      chooseImage() {
        var _this = this
        uni.chooseImage({
          count: 1, //默认9
          sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
          sourceType: ['album'], //从相册选择
          success: function(res) {
            let file = res.tempFilePaths
            var images = []
            var img = ''
            for (var i = 0; i < res.tempFilePaths.length; i++) {
              uni.uploadFile({
                url: this.$BASE_URL+'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=util.uploader&app=1',
                //仅为示例，非真实的接口地址
                filePath: file[i],
                name: 'file',
                formData: {
                  'user': 'test'
                },
                success: (res) => {
                  _this.res.wechat = true
                  // console.log(res)
                  images.push(JSON.parse(res.data).url)
                  _this.imagess = images
                  // _this.avatar = _this.imagess[0]

                  img = img + JSON.parse(res.data).url + ';'
                  _this.imgurl = img
                }
              });
            }
          }
        });
      },
      select_img() {
        var _this = this
        uni.chooseImage({
          count: 1, //默认9
          sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
          sourceType: ['album'], //从相册选择
          success: function(res) {
            let file = res.tempFilePaths
            var images = []
            var img = ''
            for (var i = 0; i < res.tempFilePaths.length; i++) {
              uni.uploadFile({
                url: this.$BASE_URL+'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=util.uploader&app=1',
                //仅为示例，非真实的接口地址
                filePath: file[i],
                name: 'file',
                formData: {
                  'user': 'test'
                },
                success: (res) => {
                  _this.res.alipay = true
                  // console.log(res)
                  images.push(JSON.parse(res.data).url)
                  _this.imagesss = images
                  // _this.avatar = _this.imagess[0]

                  img = img + JSON.parse(res.data).url + ';'
                  _this.imgurls = img
                }
              });
            }
          }
        });
      },
      previewImage() {
        console.log(this.wxskm) // http://192.168.100.251:8970/6_1597822634094.png
        var images = [];
        images.push(this.wxskm);
        console.log(images) // ["http://192.168.100.251:8970/6_1597822634094.png"]
        uni.previewImage({ // 预览图片  图片路径必须是一个数组 => ["http://192.168.100.251:8970/6_1597822634094.png"]
          current: 0,
          urls: images,
          longPressActions: { //长按保存图片到相册
            itemList: ['保存图片'],
            success: (data) => {
              console.log(data);
              uni.saveImageToPhotosAlbum({ //保存图片到相册
                filePath: payUrl,
                success: function() {
                  uni.showToast({
                    icon: 'success',
                    title: '保存成功'
                  })
                },
                fail: (err) => {
                  uni.showToast({
                    icon: 'none',
                    title: '保存失败，请重新尝试'
                  })
                }
              });
            },
            fail: (err) => {
              console.log(err.errMsg);
            }
          }
        });
      },
      previewImage1() {
        console.log(this.zfbskm) // http://192.168.100.251:8970/6_1597822634094.png
        var images = [];
        images.push(this.zfbskm);
        console.log(images) // ["http://192.168.100.251:8970/6_1597822634094.png"]
        uni.previewImage({ // 预览图片  图片路径必须是一个数组 => ["http://192.168.100.251:8970/6_1597822634094.png"]
          current: 0,
          urls: images,
          longPressActions: { //长按保存图片到相册
            itemList: ['保存图片'],
            success: (data) => {
              console.log(data);
              uni.saveImageToPhotosAlbum({ //保存图片到相册
                filePath: payUrl,
                success: function() {
                  uni.showToast({
                    icon: 'success',
                    title: '保存成功'
                  })
                },
                fail: (err) => {
                  uni.showToast({
                    icon: 'none',
                    title: '保存失败，请重新尝试'
                  })
                }
              });
            },
            fail: (err) => {
              console.log(err.errMsg);
            }
          }
        });
      },
      //选择支付方式
      changePayType(type) {
        // console.log(type)
        this.payType = type;
        if (type == 1) { // 微信
          this.boolean_wx = 'block'
          this.boolean_zfb = 'none'
          this.boolean = 'none'
          this.type = 'wechat'
        }
        if (type == 2) { // 支付宝
          this.boolean_zfb = 'block'
          this.boolean_wx = 'none'
          this.boolean = 'none'
          this.type = 'alipay'
        }
        if (type == 3) {
          this.boolean = 'block'
          this.boolean_wx = 'none'
          this.boolean_zfb = 'none'
          this.type = 'bank'
        }
      },
      onCancel(e) {},
      showMulLinkageThreePicker() {
        this.$refs.mpvueCityPicker.show()
      },
      onConfirm(e) {
        this.accountarea = e.label
        console.log(this.accountarea)
        // var pro = e.value[0]
        // var city = e.value[1]
        // var area = e.cityCode
        // this.submit.datavalue = this.province[pro].value + '0000 ' + this.city[pro][city].value + '00 ' +area
        // var a = e.label.split("-")
        // a = a[0] + ' ' + a[1] + ' ' + a[2]
        // this.submit.areas = a
      },
      // onBackPress() {
      //   if (this.$refs.mpvuePicker.showPicker) {
      // 	this.$refs.mpvuePicker.pickerCancel();
      // 	return true;
      //   }
      //   if (this.$refs.mpvueCityPicker.showPicker) {
      // 	this.$refs.mpvueCityPicker.pickerCancel();
      // 	return true;
      //   }
      // },
      // onUnload() {
      // 	if (this.$refs.mpvuePicker.showPicker) {
      // 		this.$refs.mpvuePicker.pickerCancel()
      // 	}
      // 	if (this.$refs.mpvueCityPicker.showPicker) {
      // 		this.$refs.mpvueCityPicker.pickerCancel()
      // 	}
      // },
      check() {
        this.boolean = this.boolean == 'block' ? 'none' : 'block'
      },
      bank_out() {
        this.bankout = 'block'
      },
      bank_miss(index) {
        this.bankname = this.arrs[index]
        this.bankout = 'none'
      },
      cz_jilu() {
        uni.navigateTo({
          url: '/pages/czjl/czjl'
        })
      },
      jumpto() {
        if (this.payType == 1) {
          this.wx_tx()
        }
        if (this.payType == 2) {
          this.zfb_tx()
        }
        if (this.payType == 3) {
          this.jump()
        }
      },
      ljcz() {
        let that = this
        var data = {
          'openid': this.openid,
          'money': this.money,
          'type': this.type,
          'pic_url': this.imagess[0]
        }
        console.log(data)
        uni.request({
          url: this.$BASE_URL+'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=order.luckdraw.recharge&app=1',
          method: 'POST',
          data: data,
          header: {
            'Content-Type': 'application/x-www-form-urlencoded'
          },
          success: res => {
            console.log(res)
            uni.showModal({
              title: '提示',
              content: res.data.message,
              showCancel: false,
              success() {
                if (res.data.error == 0) {
                  setTimeout(() => {
                    that.cz_jilu()
                  }, 1000)
                }
              }
            })

          },
          fail: () => {},
          complete: () => {}
        })
      }
    }
  }
</script>


<style lang="scss">
  page {
    background-color: #B5C3C7;
  }

  .container {
    width: 100%;
    height: 100vh;
    // background: url(/static/jibei/home/home_bg.png) no-repeat 0 0;
    background-size: cover;
    box-sizing: border-box;
  }

  .navbar {
    width: 100%;
    padding: 150rpx 0 50rpx;

    image {
      width: 80%;
    }
  }

  .content {
    padding: 0 10rpx 100rpx;

    .lijichongzhi {
      width: 482rpx;
      height: 84rpx;
      // background: url(/static/jibei/chongzhi/lijichongzhi.png) no-repeat 0 0;
      background-size: cover;
      margin: 60rpx auto;
    }

    .content_box {
      width: 100%;
      height: 1020rpx;
      // border-radius: 20rpx;
      // background-color: #234A54;
      // border: 2px solid #D2A473;
      // background: url(/static/jibei/chongzhi/kuang.png) no-repeat 0 0;
      background-size: cover;
      box-sizing: border-box;
      padding: 86rpx 110rpx 0;
      color: #FFFFFF;

      .titles {
        height: 80rpx;

        view {
          font-size: 30rpx;
        }

        // border-bottom: 1px solid #18353C;
      }

      .inputs {
        width: 100%;
        height: 86rpx;
        
        // background: url(../../static/jibei/chongzhi/kuang2.png) no-repeat 0 0;
        // background-size: cover;
        // border-bottom: 1px solid #18353C;

        .icon_image {
          width: 70rpx;
          height: 70rpx;
          margin-right: 20rpx;
        }
        view {
          font-size: 30rpx;
        }

        /deep/ .u-input__input {
          color: #FFFFFF !important;
        }
      }

      .paddings {
        padding-left: 100rpx !important;
      }

      .inputs2 {
        padding: 20rpx 0;
        height: 300rpx;
        // background: url(../../static/jibei/chongzhi/kuang3.png) no-repeat 0 0;
        // background-size: cover;

        view {
          width: 100%;
          height: 100%;
        }

        image {
          width: 96%;
          height: 94%;

        }
      }
    }
  }
  
  .texts {
    padding: 30rpx 0 0;
    view {
      font-size: 20rpx;
    }
    text {
      color: #F29E3C !important;
    }
  }

  /deep/ .uni-radio-input {
    width: 50rpx;
    height: 50rpx;
  }
</style>
